<template>
  <div class="kjk">
    <a-typography-title :level="4" class="header">
      <img
        src="@/assets/left-s-line.png"
        class="left-s-line"
        @click="handleAvatarClick"
      />
      地址管理
    </a-typography-title>
    <div v-if="status">
      <div class="dzList">
        <div v-for="(item, index) in list" :key="index" class="item-container">
          <div class="wFull">
            <p class="slh">
              {{ item.province }} {{ item.city }}
              {{ item.county }}
              {{ item.addressDetail }}
            </p>
            <div class="lc">
              <p>{{ item.addressName }}</p>
              <p class="ml10">{{ item.tel }}</p>
            </div>
          </div>

          <div class="radioBJ">
            <van-radio
              :name="index"
              v-model="selectedAddress"
              checked-color="#d7855e"
              icon-size="18px"
              @click="onChange(item, index)"
            >
              <span class="text-sm text-gray-600">默认</span>
            </van-radio>
            <div class="image-text_2" @click="onEdit(item, index)">
              <img src="@/assets/160.png" class="img16" />
              编辑
            </div>
          </div>
          <div class="jx"></div>
        </div>
      </div>

      <van-button type="default" block class="add" @click="onAdd">
        添加新地址
      </van-button>
    </div>
    <van-address-edit
      v-else
      :area-list="areaList"
      :address-info="addressInfo"
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
    />
  </div>
</template>

<script setup>
import { areaList } from '@vant/area-data'
import { useRouter, useRoute } from 'vue-router'
import { addAddress, updateAddress, addressList } from '@/api/api'
import { Toast } from 'vant'
const router = useRouter()
const route = useRoute()
const chosenAddressId = ref('1')
const status = ref(true)
const addOrUpdate = ref(false)
const list = ref([])
const userInfo = JSON.parse(localStorage.getItem('userInfo'))
const addressInfo = ref({})
const checked = ref('')
const selectedAddress = ref(0)

onBeforeMount(() => {
  getList()
})
const onChange = (item, index) => {
  console.log('onChange', item, index)
  let p = JSON.parse(JSON.stringify(item))
  p.memberDefault = 1
  updateAddress(p).then((res) => {
    if (res.code == 200) {
      status.value = true
      getList()
      Toast.success(res.msg)
    } else {
      Toast.fail(res.msg)
    }
  })
}
const getList = () => {
  addressList({ memberId: userInfo?.id }).then((res) => {
    if (res.code == 200) {
      res.rows?.forEach((item, index) => {
        if (item.memberDefault == 1) {
          selectedAddress.value = index
        }
      })
      list.value = res.rows
    }
  })
}
const handleAvatarClick = () => {
  if (status.value) {
    router.go(-1)
  } else {
    status.value = true
  }
}
const onAdd = () => {
  status.value = false
  addOrUpdate.value = true
  addressInfo.value = {
    name: '',
    tel: '',
    province: '',
    city: '',
    county: '',
    detail: '',
    memberAddress: '',
    memberId: userInfo?.id,
  }
}
const onEdit = (item, index) => {
  status.value = false
  addOrUpdate.value = false
  addressInfo.value = { ...item, name: item.addressName }
}
const onSave = (content) => {
  let p = JSON.parse(JSON.stringify(content))
  p.addressName = content.name
  p.memberDefault = content.isDefault == true ? 1 : 0

  delete p.name
  delete p.isDefault
  console.log('p: ', p)
  if (addOrUpdate.value) {
    addAddress(p).then((res) => {
      if (res.code == 200) {
        status.value = true
        getList()
        Toast.success(res.msg)
      } else {
        Toast.fail(res.msg)
      }
    })
  } else {
    updateAddress(p).then((res) => {
      if (res.code == 200) {
        status.value = true
        getList()
        Toast.success(res.msg)
      } else {
        Toast.fail(res.msg)
      }
    })
  }
}
</script>

<style scoped lang='less'>
.kjk {
  .header {
    text-align: center;
    margin: 0;
    padding: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    text-align: center;
    font-style: normal;
    height: 60px;
    .left-s-line {
      width: 20px;
      position: absolute;
      left: 16px;
      top: 16px;
    }
  }

  // :deep(.van-radio__icon--round) {
  //   display: none;
  // }
}
:deep(.van-address-list__bottom) {
  position: absolute;
  bottom: 0px;
  margin: 0;
  width: 100%;
  padding: 0;
  left: 0;
  .van-button {
    margin: 0;
    background: #3c7058;
    border: #3c7058;
    border-radius: 0 !important;
    height: 68px;
  }
}
:deep(.van-address-edit__buttons) {
  position: absolute;
  bottom: 0px;
  margin: 0;
  width: 100%;
  padding: 0;
  left: 0;
  .van-button {
    margin: 0;
    background: #3c7058;
    border: #3c7058;
    border-radius: 0 !important;
    height: 68px;
  }
}
:deep(.van-cell-group--inset) {
  margin: 0;
}
.item-container {
  font-size: 16px;
  .wFull {
    padding: 16px;
    .lc {
      display: flex;
    }
  }
  .radioBJ {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    .image-text_2 {
      width: 60px;
      height: 22px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.5);
      line-height: 22px;
      text-align: left;
      font-style: normal;
    }
  }
  .jx {
    width: 100%;
    height: 18px;
    background: #fcfaf4;
  }
}
:deep(.van-switch--on) {
  background: #d7855e;
}
.add {
  width: 100%;
  height: 68px;
  background: #3c7058;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
}
.dzList {
  width: 100%;
  height: calc(100vh - 128px);
  overflow-y: auto;
}
</style>